// 3.1 为 TodoList 组件，指定 props 的类型
// 这个步骤就是类似于vue中的props声明，这样就可以指定子组件接收
// 父组件传递过来的哪个属性或者方法，
type Props = {
  list: {
    id: number
    text: string
    done: boolean
  }[]
  onToggleTodo: (id: number) => void
  onDeleteTodo: (id: number) => void
}

const TodoList = ({ list, onToggleTodo, onDeleteTodo }: Props) => {
  // console.log(list)
  // 这两个方法都是只有一行代码，都是只调用了一次函数
  // 而且是调用父组件传递过来的函数，可以进行优化
  // 直接在事件中触发就可以
  // 如果还有其他的复杂逻辑，那就还是按照原来的方式来处理
  // const onChange = (id: number) => {
  //   onToggleTodo(id)
  // }
  // const onDelete = (id: number) => {
  //   onDeleteTodo(id)
  // }
  return (
    <ul className='todo-list'>
      {/* 编辑样式：editing  已完成样式：completed */}

      {list.map(todo => (
        <li key={todo.id} className={todo.done ? 'completed' : ''}>
          <div className='view'>
            {/* <input
              className='toggle'
              onChange={() => {
                onChange(todo.id)
              }}
              type='checkbox'
            /> */}
            <input
              className='toggle'
              onChange={() => {
                onToggleTodo(todo.id)
              }}
              type='checkbox'
            />
            <label>{todo.text}</label>
            {/* <button className='destroy' onClick={() => onDelete(todo.id)} /> */}
            <button className='destroy' onClick={() => onDeleteTodo(todo.id)} />
          </div>
          <input className='edit' defaultValue='Create a TodoMVC template' />
        </li>
      ))}
    </ul>
  )
}

export default TodoList
